var COLOR_SELECTOR = {
    value: 'rgb(0, 0, 0)',
    canvas: null,
    context: null,
    brightnessControl: null,
    doubleCircleX: 0,
    doubleCircleY: 0,
    isDown: false,
    // 初始化
    init(divId) {
        document.getElementById(divId).innerHTML = `
            <canvas id="colorSelectorCanvas" width="256" height="256" style="border: 0px; cursor: pointer;"></canvas>
            <div>
                <input type="range" id="colorSelectorBrightness" style="width: 200px; margin-top: 10px;" min="0" max="255" value="0">
                <span id="colorSelectorBlueValue" style="font-size: 20px;"></span>
            </div>
            <span id="colorSelectorOut">${this.value}</span>
        `;
        this.canvas = document.getElementById('colorSelectorCanvas');
        this.context = this.canvas.getContext('2d');
        this.brightnessControl = document.getElementById('colorSelectorBrightness');
        // 初始化事件
        this.initEvent();
        // 初始化面板
        this.drawColorPanel(this.brightnessControl.valueAsNumber);
        // 绘制圆形仪器
        this.drawDoubleBorderCircle();
    },
    // 初始化面板
    drawColorPanel(brightness) {
        document.getElementById("colorSelectorBlueValue").innerHTML = brightness;
        let imageData = this.context.createImageData(256, 256); // 创建一个 255x255 的空白像素数据对象
        let index = 0;

        for (let i = 0; i < imageData.data.length; i += 4) {
            // 将彩条平均分布于255x255的画板上
            let x = (index % 256), y = Math.floor(index / 256);
            let r = x; // 在这里使用 x 作为红色通道的值
            let g = y; // 在这里使用 y 作为绿色通道的值
            let b = brightness; // 使用传入的 brightness 值作为蓝色通道的值

            imageData.data[i] = r;
            imageData.data[i + 1] = g;
            imageData.data[i + 2] = b;
            imageData.data[i + 3] = 255; // 不透明度
            index++;
        }
        this.context.putImageData(imageData, 0, 0);
    },
    // 绘画圆形
    drawDoubleBorderCircle(x = this.doubleCircleX, y = this.doubleCircleY, radius = 3) {
        this.doubleCircleX = x;
        this.doubleCircleY = y;
        // 内层
        this.context.beginPath();
        this.context.arc(x, y, radius, 0, 2 * Math.PI);
        this.context.fillStyle = "transparent"; // 设置圆形的背景颜色为透明
        this.context.fill();
        this.context.strokeStyle = "white";
        this.context.lineWidth = 1;
        this.context.stroke();
        // 外层
        this.context.beginPath();
        this.context.arc(x, y, (radius + 1), 0, 2 * Math.PI);
        this.context.fillStyle = "transparent"; // 设置圆形的背景颜色为透明
        this.context.fill();
        this.context.strokeStyle = "black";
        this.context.lineWidth = 1;
        this.context.stroke();
    },
    // 改变选中坐标
    changeXY(event) {
        // 初始化面板
        this.drawColorPanel(this.brightnessControl.valueAsNumber);
        let rect = this.canvas.getBoundingClientRect();
        let x = event.clientX - rect.left;
        let y = event.clientY - rect.top;
        let pixelData = this.context.getImageData(x, y, 1, 1).data;
        this.value = "rgb(" + pixelData[0] + ", " + pixelData[1] + ", " + pixelData[2] + ")";
        document.getElementById("colorSelectorOut").innerHTML = this.value;
        // 绘制圆形仪器
        this.drawDoubleBorderCircle(x, y);
    },
    // 初始化事件
    initEvent() {
        // 蓝色轴修改重新渲染面板
        this.brightnessControl.addEventListener("input", (event) => {
            // 初始化面板
            this.drawColorPanel(this.brightnessControl.valueAsNumber);
            // 绘制圆形仪器
            this.drawDoubleBorderCircle();
            // 重新获取颜色
            let pixelData = this.context.getImageData(this.doubleCircleX, this.doubleCircleY, 1, 1).data;
            this.value = "rgb(" + pixelData[0] + ", " + pixelData[1] + ", " + pixelData[2] + ")";
            document.getElementById("colorSelectorOut").innerHTML = this.value;
        });

        // 鼠标按下
        this.canvas.addEventListener("mousedown", (event) => {
            this.isDown = true;
            this.changeXY(event);
        });

        // 鼠标松手
        this.canvas.addEventListener("mouseup", (event) => {
            this.isDown = false;
        });

        // 移动
        this.canvas.addEventListener("mousemove", (event) => {
            if (!this.isDown) {
                return;
            }
            this.changeXY(event);
        });

        // 移出
        this.canvas.addEventListener("mouseout", (event) => {
            this.isDown = false;
        });
    }
}